<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../../css/common.css">
    <link rel="stylesheet" href="../../css/base.css">
    <link rel="stylesheet" href="../../css/admin/index.css">
    <script src="../../js/PromiseAjax.js"></script>
    <script src="../../js/jquery-3.3.1.js"></script>
    <script src="../../js/cookie.js"></script>
    <script src="../../js/searchFormater.js"></script>
    <script src="../../js/myswiper.js"></script>
</head>
<body>
    <div class="head">

    </div>
    <div class="container">
        <div class="content">
            <div class="floatl nav">
                <section class="part1"><a href="?opId=1">用户管理</a></section>
                <section class="part2"><a href="?opId=2">商品管理</a></section>
                <section class="part3"><a href="?opId=3">模块划分</a></section>
                <section class="part4"><a href="?opId=4">轮播预览</a></section>
                <section class="part5"><a href="?opId=5">分类管理</a></section>
                <section class="part6"><a href="?opId=6">管理员管理</a></section>
            </div>
            <div class="aside">
                <section class="aside-sec">
                    <ul>
                        <li><a>用户信息管理</a></li>
                    </ul>
                    <div class="aside-body">
                        <table border-spacing="0" border-collapse="collapse" cellspacing="0" class="aside-body-table">
                            <col span="1" width="50" >
                            <col span="1" width="200" >
                            <col span="1" width="200" >
                            <col span="1" width="200" >
                            <col span="1" width="300" >
                            <col span="1" width="70" >
                            <col span="1" width="70" >
                            <thead>
                                <tr>
                                    <th>序号</th>
                                    <th>用户名</th>
                                    <th>用户密码</th>
                                    <th>手机号</th>
                                    <th>上次登录时间</th>
                                    <th colspan="2">操作</th>
                                    <th></th>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                        <div class="pagination">
                            <a href="javascript:;" class="prev">⌜</a>
                            <!-- <a href="javascript:;">1</a>
                            <a href="javascript:;">2</a>
                            <a href="javascript:;">3</a>
                            <a href="javascript:;">4</a>
                            <a href="javascript:;">5</a> -->
                            <a href="javascript:;" class="next">⌝</a>
                        </div>
                    </div>
                </section>
                <section class="aside-sec products">
                    <ul>
                        <li><a href="javascript:;">商品管理</a></li>
                    </ul>
                    <div class="aside-body">
                        <div style="overflow:hidden;">
                            <a class="addProducts" href="javascript:;" style="float: right;">添加+</a>
                        </div>
                        <table border-spacing="0" border-collapse="collapse" cellspacing="0" class="aside-body-table" style="table-layout:'fixed';">
                            <col span="1" width="50" >
                            <col span="1" width="150" >
                            <col span="1" width="200" >
                            <col span="1" width="100" >
                            <col span="1" width="100" >
                            <col span="1" width="120" >
                            <col span="1" width="80" >
                            <col span="1" width="100" >
                            <col span="1" width="50" >
                            <col span="1" width="50" >
                            <!-- <col span="1" width="70" > -->
                            <thead>
                                <tr>
                                    <th>序号</th>
                                    <th>商品名</th>
                                    <th>描述</th>
                                    <th>价格</th>
                                    <th>所属类别</th>
                                    <th>所属类型</th>
                                    <th>图片</th>
                                    <th>库存</th>
                                    <th colspan="2">操作</th>
                                    <!-- <th></th> -->
                                </tr>
                            </thead>
                            <tbody>
                                <!-- <tr>
                                    <td>1</td>
                                    <td>阿斯顿马丁</td>
                                    <td><div style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis; width: 200px;">全球限量级跑车，外形酷炫，加速快，百公里只需要6s，阿卡建设大街看看哈师大减号点击案件十大进口商的啊</div>
                                        </td>
                                    <td>￥50000000</td>
                                    <td>车，跑车</td>
                                    <td><img style="width:60px;height: 60px;" src="../../images/20211229/1.jpg" alt=""></td>
                                    <td>3000000</td>
                                    <td><a href="javascript:;">修改</a></td>
                                    <td><a href="javascript:;">删除</a></td>
                                </tr> -->
                            </tbody>
                        </table>
                        <div class="pagination">
                            <a href="javascript:;" class="prev">⌜</a>
                            <a href="javascript:;" class="next">⌝</a>
                        </div>
                    </div>
                </section>
                <section class="aside-sec">
                    <ul>
                        <li>1</li>
                        <li>2</li>
                        <li>3</li>
                        <li>4</li>
                    </ul>
                </section>
                <section class="aside-sec">
                    <ul>
                        <li><a href="javascript:;" class="transImg">轮播管理</a></li>
                        <li><a href="javascript:;" class="transImg noActive">轮播预览</a></li>
                    </ul>
                    <div class="aside-body transImg">
                        <div style="overflow:hidden;">
                            <a class="addTransImg" href="javascript:;" style="float: right;">添加+</a>
                        </div>
                        <table border-spacing="0" border-collapse="collapse" cellspacing="0" class="aside-body-table">
                            <col span="1" width="50" >
                            <col span="1" width="500" >
                            <col span="1" width="200" >
                            <col span="1" width="70" >
                            <!-- <col span="1" width="70" > -->
                            <thead>
                                <tr>
                                    <th>序号</th>
                                    <th>图片</th>
                                    <th>是否参与轮播</th>
                                    <th>操作</th>
                                    <!-- <th></th> -->
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>1</td>
                                    <td><img src="" alt=""></td>
                                    <td><span class="floatl" style="position: relative;top: 50%;transform: translateY(-50%);">是</span><div class="aside-sec-tab-div"><a href="javascript:;" class="aside-sec-tab-span"></a></div><span class="floatr"  style="position: relative;top: -50%;transform: translateY(50%);">否</span></td>
                                    <td><a href="javascript:;">删除</a></td>
                                </tr>
                            </tbody>
                        </table>
                        <div class="pagination">
                            <a href="javascript:;" class="prev">⌜</a>
                            <a href="javascript:;" class="next">⌝</a>
                        </div>
                    </div>
                    <div class="aside-body transImg autoPlayImg" style="width: 1000px;height: 450px;overflow: hidden;">
                        <div class="autoPlayImg" style="width: 940px;height: 350px;overflow: hidden; position: relative;margin: 0 auto;">
                        </div>
                    </div>
                </section>
                <section class="aside-sec">
                    <ul>
                        <li><a href="javascript:;" class="type">类别管理</a></li>
                        <li><a href="javascript:;" class="type noActive">类型管理</a></li>
                    </ul>
                    <div class="aside-body type" style="display: block;">
                        <div style="overflow:hidden;">
                            <a class="addBigType" href="javascript:;" style="float: right;">添加+</a>
                        </div>
                        
                        <table border-spacing="0" border-collapse="collapse" cellspacing="0" class="aside-body-table">
                            <col span="1" width="70" >
                            <col span="1" width="500" >
                            <col span="1" width="90" >
                            <col span="1" width="90" >
                            <thead>
                                <tr>
                                    <th>序号</th>
                                    <th>类别名称</th>
                                    <th colspan="2">操作</th>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                        <div class="pagination">
                            <a href="javascript:;" class="prev">⌜</a>
                            <a href="javascript:;" class="next">⌝</a>
                        </div>
                    </div>
                    <div class="aside-body type" style="display: none;">
                        <div style="overflow:hidden;">
                            <a class="addSType" href="javascript:;" style="float: right;">添加+</a>
                        </div>
                        
                        <table border-spacing="0" border-collapse="collapse" cellspacing="0" class="aside-body-table">
                            <col span="1" width="70" >
                            <col span="1" width="300" >
                            <col span="1" width="300" >
                            <col span="1" width="90" >
                            <col span="1" width="90" >
                            <thead>
                                <tr>
                                    <th>序号</th>
                                    <th>类型名称</th>
                                    <th>类型显示</th>
                                    <th colspan="2">操作</th>
                                    <th></th>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                        <div class="pagination">
                            <a href="javascript:;" class="prev">⌜</a>
                            <a href="javascript:;" class="next">⌝</a>
                        </div>
                    </div>
                </section>
                <section class="aside-sec">
                    <ul>
                        <li>管理员管理</li>
                    </ul>
                </section>
            </div>
        </div>
    </div>
    <div class="foot">
    </div>
    <div class="operate">
        <div class="update" style="display: none;">
            <div style="width: 400px;height: 400px;position: absolute;left: 50%;top: 40%;transform: translate(-50%,-50%);border: 1px solid rgb(26, 24, 24);background-color: #fff;">
                <p style="padding:0px;margin:0px;height: 30px;line-height:30px;background-color: rgb(243, 236, 236);">
                    <span style="float: left;margin-left: 15px;">修改用户信息</span><span style="float: right;margin-right: 15px;"><button class="cancel">X</button></span>
                </p>
                <ul style="list-style: none;display: flex;flex-direction: column;justify-content: space-evenly;height: 300px;align-items: center;">
                    <li>
                        <label for="username">用户名：</label><input type="text" id="username" value="132456" readonly disabled>
                    </li>
                    <li>
                        <label for="password">密码：</label><input type="text" id="password" value="132456">
                    </li>
                    <li>
                        <label for="tel">手机号：</label><input type="text" id="tel" value="132456">
                    </li>
                    <button id="updBtn">提交</button>
                </ul>
            </div>
        </div>
        <div id="addBigType" style="display: none;">
            <div style="width: 400px;height: 400px;position: absolute;left: 50%;top: 40%;transform: translate(-50%,-50%);border: 1px solid rgb(26, 24, 24);background-color: #fff;">
                <p style="padding:0px;margin:0px;height: 30px;line-height:30px;background-color: rgb(243, 236, 236);">
                    <span style="float: left;margin-left: 15px;">添加大类别</span><span style="float: right;margin-right: 15px;"><button class="cancel">X</button></span>
                </p>
                <ul style="list-style: none;display: flex;flex-direction: column;justify-content: space-evenly;height: 300px;align-items: center;">
                    <li>
                        <label for="TypeName">大类别名称：</label><input type="text" id="TypeName" value="">
                    </li>
                    <button id="submit">提交</button>
                </ul>
            </div>
        </div>
        <div id="updBigType" style="display: none;">
            <div style="width: 400px;height: 400px;position: absolute;left: 50%;top: 40%;transform: translate(-50%,-50%);border: 1px solid rgb(26, 24, 24);background-color: #fff;">
                <p style="padding:0px;margin:0px;height: 30px;line-height:30px;background-color: rgb(243, 236, 236);">
                    <span style="float: left;margin-left: 15px;">修改大类别</span><span style="float: right;margin-right: 15px;"><button class="cancel">X</button></span>
                </p>
                <ul style="list-style: none;display: flex;flex-direction: column;justify-content: space-evenly;height: 300px;align-items: center;">
                    <li>
                        <label for="TypeName1">大类别名称：</label><input type="text" id="TypeName1" value="">
                    </li>
                    <button id="submit1">提交</button>
                </ul>
            </div>
        </div>
        <div id="addSType" style="display: none;">
            <div style="width: 400px;height: 400px;position: absolute;left: 50%;top: 40%;transform: translate(-50%,-50%);border: 1px solid rgb(26, 24, 24);background-color: #fff;">
                <p style="padding:0px;margin:0px;height: 30px;line-height:30px;background-color: rgb(243, 236, 236);">
                    <span style="float: left;margin-left: 15px;">添加类别</span><span style="float: right;margin-right: 15px;"><button class="cancel">X</button></span>
                </p>
                <ul style="list-style: none;display: flex;flex-direction: column;justify-content: space-evenly;height: 300px;align-items: center;">
                    <li>
                        <label for="TypeName2">类别名称：</label><input type="text" id="TypeName2" value="">
                    </li>
                    <button id="submit3">提交</button>
                </ul>
            </div>
        </div>
        <div id="updStype" style="display: none;">
            <div style="width: 400px;height: 400px;position: absolute;left: 50%;top: 40%;transform: translate(-50%,-50%);border: 1px solid rgb(26, 24, 24);background-color: #fff;">
                <p style="padding:0px;margin:0px;height: 30px;line-height:30px;background-color: rgb(243, 236, 236);">
                    <span style="float: left;margin-left: 15px;">修改类型名称</span><span style="float: right;margin-right: 15px;"><button class="cancel">X</button></span>
                </p>
                <ul style="list-style: none;display: flex;flex-direction: column;justify-content: space-evenly;height: 300px;align-items: center;">
                    <li>
                        <label for="TypeName3">类型名称：</label><input type="text" id="TypeName3" value="">
                    </li>
                    <button id="submit4">提交</button>
                </ul>
            </div>
        </div>
        <div id="addTransImg" style="display: none;">
            <div style="width: 400px;height: 400px;position: absolute;left: 50%;top: 40%;transform: translate(-50%,-50%);border: 1px solid rgb(26, 24, 24);background-color: #fff;">
                <p style="padding:0px;margin:0px;height: 30px;line-height:30px;background-color: rgb(243, 236, 236);">
                    <span style="float: left;margin-left: 15px;">添加轮播图</span><span style="float: right;margin-right: 15px;"><button class="cancel">X</button></span>
                </p>
                <ul style="list-style: none;display: flex;flex-direction: column;justify-content: space-evenly;height: 300px;align-items: center;">
                    <li>
                        <label for="transImg">轮播图片</label><input id="transImg" type="file">
                    </li>
                    <li>
                        <label for="isTrans">是否参与轮播：</label><br>
                        <span>是</span><input type="radio" name="isTrans" class="isTrans" value="1"><br>
                        <span>否</span><input type="radio" name="isTrans" class="isTrans" value="0">
                    </li>
                    <button id="submit5">提交</button>
                </ul>
            </div>
        </div>
        <div id="addGoods" style="display: none;">
            <div style="width: 400px;height: 400px;position: absolute;left: 50%;top: 40%;transform: translate(-50%,-50%);border: 1px solid rgb(26, 24, 24);background-color: #fff;">
                <p style="padding:0px;margin:0px;height: 30px;line-height:30px;background-color: rgb(243, 236, 236);">
                    <span style="float: left;margin-left: 15px;">添加商品</span><span style="float: right;margin-right: 15px;"><button class="cancel">X</button></span>
                </p>
                <ul style="list-style: none;display: flex;flex-direction: column;justify-content: space-evenly;height: 300px;align-items: center;">
                    <li><label for="pname">商品名称：</label><input type="text" id="pname"></li>
                    <li>商品类别<select name="" id="BType"></select><span class="subType1">商品类型<select name="" id="subType1"></select></span></li>
                    <li><label for="pDescribe">商品描述：</label><textarea id="pDescribe" cols="30" rows="3"></textarea></li>
                    <li><label for="showImg">图片：</label><input id="showImg" type="file"></li>
                    <li><label for="price">价格：</label><input id="price" type="text"></li>
                    <li><label for="inventory">库存：</label><input id="inventory" type="text"></li>
                    <button id="submit6">提交</button>
                </ul>
            </div>
        </div>
        <div id="updPro" style="display: none;">
            <div style="width: 400px;height: 400px;position: absolute;left: 50%;top: 40%;transform: translate(-50%,-50%);border: 1px solid rgb(26, 24, 24);background-color: #fff;">
                <p style="padding:0px;margin:0px;height: 30px;line-height:30px;background-color: rgb(243, 236, 236);">
                    <span style="float: left;margin-left: 15px;">修改商品信息</span><span style="float: right;margin-right: 15px;"><button class="cancel">X</button></span>
                </p>
                <ul style="list-style: none;display: flex;flex-direction: column;justify-content: space-evenly;height: 300px;align-items: center;">
                    <li><label for="pname1">商品名称：</label><input type="text" id="pname1"></li>
                    <li>商品类别<select name="" id="BType1"></select><span class="subType2">所属类型<select name="" id="subType2"></select></span></li>
                    <li><label for="pDescribe1">商品描述：</label><textarea id="pDescribe1" cols="30" rows="3"></textarea></li>
                    <!-- <li><label for="showImg1">图片：</label><input id="showImg1" type="file"></li> -->
                    <li><label for="price1">价格：</label><input id="price1" type="text"></li>
                    <li><label for="inventory1">库存：</label><input id="inventory1" type="text"></li>
                    <button id="submit8">提交</button>
                </ul>
            </div>
        </div>
    </div>
    <script>
        let resId = getCookie("id");
        let ulevel = getCookie("ulevel");
		if (!resId){
			window.location.href = '../../login.html';
		}
        ajax({
            url:'../../php/footer.php'
        }).then(res=>{
            $(".foot").html(res);
        });
    </script>
    <!-- <script src="../../js/admin/index.js"></script> -->
    <script>
        $(function(){
            let opId = formatSearch(window.location.search)['opId'];
            $(`.nav > section a:eq(${opId-1})`).css({
                backgroundColor: "white",
                color: "rgb(104, 116, 112)"
            });
            $(`.aside-sec:eq(${opId - 1})`).addClass("aside-sec-show");
            if ( opId == 1 ){
                let page = 1 ; 
                let perPage = 10 ;
                getRenderData(page);
                function getRenderData(page){
                    let uEle = document.querySelectorAll(".aside-sec .aside-body table tbody")[`${opId - 1}`];
                    // console.log(page);
                    ajax({
                        url:'../../php/admin/allUsers.php',
                        method:'post',
                        dataType:'json',
                        contentType:true,
                        async:true,
                        data:{
                            page,
                            perPage
                        }
                    }).then(res=>{
                        renderUDom(uEle,res);
                        getPageNum (perPage,page);
                    });
                }
                function renderUDom(ele,data){
                    ele.innerHTML = '' ;
                    data.forEach((item,key)=>{
                        let trEle = document.createElement('tr');
                        let time = new Date(item['uTime']*1000);
                        trEle.innerHTML = `<td>${key+1}</td>
                                <td>${item['userName']}</td>
                                <td>${item['passWord']}</td>
                                <td>${item['tel']}</td>
                                <td>${time.getFullYear()}/${time.getMonth()+1}/${time.getDate()}&nbsp;&nbsp;${time.getHours()}:${time.getMinutes()}</td>
                                <td><a class="uptBtn" myid=${item['id']}>修改</a></td>
                                <td><a class="delBtn" myid=${item['id']}>删除</a></td>`;
                        let delBtnEle = trEle.querySelector(".delBtn");
                        let uptBtnEle = trEle.querySelector(".uptBtn");
                        uptBtnEle.onclick = function (){
                            let uid = this.getAttribute("myid");
                            // console.log(uid);
                            $(".operate .update").fadeIn();
                            $(".cancel").click(()=>{$(".operate .update").css("display","none")});
                            ajax({
                                url:'../../php/admin/upSel.php',
                                method:'post',
                                data:{uid},
                                dataType:'json'
                            }).then(res=>{
                                $("#username").val(res['userName']);
                                $("#password").val(res['passWord']);
                                $("#tel").val(res['tel']);
                                document.getElementById("updBtn").onclick = function(){
                                    let pwd = $("#password").val();
                                    let tel = $("#tel").val();
                                    let reg = /^1[3-9]\d{9}$/g;
                                    if( reg.test(tel) ){
                                        ajax({
                                            url:'../../php/admin/updUser.php',
                                            method:'post',
                                            dataType:'json',
                                            data:{
                                                uid,
                                                pwd,
                                                tel 
                                            }
                                        }).then(res=>{
                                            if( res['status'] == 1 ){
                                                alert("修改成功");
                                                $(".operate .update").css("display","none")
                                                getRenderData(page);
                                            }
                                        });
                                    } else {
                                        alert("手机号不符合规范");
                                    }
                                }
                            });
                        }
                        delBtnEle.onclick = function (){
                            let uid = this.getAttribute("myid");
                            ajax({
                                url:'../../php/admin/delUser.php',
                                method:'post',
                                dataType:'json',
                                data:{
                                    uid
                                }
                            }).then(res=>{
                                if( res['status'] == 1 ){
                                    alert("删除成功");
                                    getRenderData(page);
                                }
                            }); 
                        }
                        ele.appendChild(trEle);
                    });
                }
                function getPageNum (perPage,page){
                    ajax({
                        url:'../../php/admin/userNum.php',
                        dataType:'json',
                        method:'post',
                        data:{perPage}
                    }).then(res=>{
                        // console.log(res);
                        pageRender(res['totalPage'],page);
                    });
                }
                function pageRender (pageNum,page){
                    let pagEle = document.querySelector(".pagination");
                    pagEle.innerHTML = '' ;
                    let str = '' ;
                    for(let i = 1 ; i <= pageNum ; i ++ ){
                        str += `<a href="javascript:;">${i}</a>`
                    }
                    pagEle.innerHTML = `<a href="javascript:;" class="prev">⌜</a>
                                    ${str}
                                    <a href="javascript:;" class="next">⌝</a>`;
                    let aEles = pagEle.querySelectorAll("a");
                    aEles.forEach(function(aEle,key){
                        aEle.onclick = function (){
                            if( aEle.className == "prev" ){
                                if( page > 1 ){
                                    page = page - 1 ;
                                    getRenderData(page);
                                }
                            } else 
                            if( aEle.className == "next" ){
                                if( page < pageNum ){
                                    page = page + 1 ;
                                    // console.log(page);
                                    getRenderData(page);
                                }
                            } else {
                                page = parseInt(aEle.innerHTML.trim()) ;
                                getRenderData(page);
                            }
                        }
                        
                    });
                }
            }
            if ( opId == 2 ){
                let page = 1 ;  
                let perPage = 5 ; 
                function addProducts(){
                    document.querySelector(".addProducts").onclick = function (){
                        $("#addGoods").fadeIn();
                        $(".cancel").click(()=>{$(".operate #addGoods").css("display","none")});
                        ajax({
                            url:'../../php/admin/TypeName.php',
                            method:'post',
                            dataType:'json',
                            data:{
                                opt:'BSelType'
                            }
                        }).then(res=>{
                            $("#BType").html(res['data1']);
                            $("#subType1").html(res['data2']);

                        });
                        document.querySelector("#submit6").onclick = function (){
                            let pname = $("#pname").val();
                            let pDescribe = $("#pDescribe").val();
                            let BType = $("#BType").val();
                            let subType1 = $("#subType1").val();
                            let price = $("#price").val();
                            let inventory = $("#inventory").val();
                            let showImg = $("#showImg")[0].files[0];
                            let form = new FormData();
                            form.append("pname",pname); 
                            form.append("pDescribe",pDescribe);
                            form.append("BType",BType);
                            form.append("subType1",subType1);
                            form.append("showImg",showImg); 
                            form.append("price",price);
                            form.append("inventory",inventory);
                            form.append("opt","addGoods");
                            ajax({
                                url:'../../php/admin/allType.php',
                                method:'post',
                                dataType:'json',
                                contentType:false,
                                data:form
                            }).then(res=>{
                                if( res['status'] == 1 ){
                                    alert("添加成功！");
                                    $(".operate #addGoods").css("display","none");
                                    getProList(page);
                                } else{
                                    alert("操作失败！");
                                }
                            });
                        }
                    } 
                }
                getProList(page);
                function getProList(page){
                    ajax({
                        url:'../../php/admin/allType.php',
                        method:'post',
                        dataType:'json',
                        data:{
                            page,
                            perPage,
                            opt:'getProList'
                        }
                    }).then(res=>{
                        let tbodyEle = document.querySelector(".aside > .products table tbody");
                        renderPro(tbodyEle,res)
                        addProducts();
                        getPagePro(page,perPage);
                    });
                }  
                function renderPro(ele,dataArr){
                    ele.innerHTML = '' ;
                    dataArr.forEach((item,key)=>{
                        let trEle = document.createElement("tr");
                        trEle.innerHTML = `<td>${key+1}</td>
                                    <td>${item['pName']}</td>
                                    <td><div style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis; width: 200px;">${item['pDescribe']}</div>
                                        </td>
                                    <td>￥${item['price']}</td>
                                    <td>${item['typeName']}</td>
                                    <td>${item['temperName']}</td>
                                    <td><img style="width:60px;height: 60px;" src="../../${item['showImg']}" alt=""></td>
                                    <td>${item['inventory']}</td>
                                    <td><a myid="${item['id']}" class="updPro" href="javascript:;">修改</a></td>
                                    <td><a myid="${item['id']}" class="delPro" href="javascript:;">删除</a></td>` ;
                        let updProEle = trEle.querySelector(".updPro");
                        let delProEle = trEle.querySelector(".delPro");
                        updProEle.onclick = function (){
                            $("#updPro").fadeIn();
                            $(".cancel").click(()=>{$(".operate #updPro").css("display","none")});
                            let pid = this.getAttribute("myid");
                            ajax({
                                url:'../../php/admin/allType.php',
                                method:'post',
                                dataType:'json',
                                data:{
                                    opt:'updProEle',
                                    pid
                                }
                            }).then(res=>{
                                $("#pname1").val(res['pName']);
                                $("#BType1").html(res['data1']);
                                $("#pDescribe1").val(res['pDescribe']);
                                $("#price1").val(res['price']);
                                $("#inventory1").val(res['inventory']);
                                $(".operate #subType2").html(res['data2']);
                            });
                            document.querySelector("#submit8").onclick = function (){
                                let pname = $("#pname1").val();
                                let BType = $("#BType1").val();
                                let pDescribe = $("#pDescribe1").val();
                                let price = $("#price1").val();
                                let inventory = $("#inventory1").val();
                                let subType = $(".operate #subType2").val();
                                ajax({
                                    url:'../../php/admin/allType.php',
                                    dataType:'json',
                                    method:'post',
                                    data:{
                                        pid,
                                        pname,
                                        BType,
                                        subType,
                                        pDescribe,
                                        price,
                                        inventory,
                                        opt:'updatePro'
                                    }
                                }).then(res=>{
                                    if( res['status'] == 1 ){
                                        alert("修改成功！");
                                        $(".operate #updPro").css("display","none");
                                        getProList(page);
                                    } else {
                                        alert("操作失败！");
                                    }
                                });
                            }
                        }
                        delProEle.onclick = function (){
                            let pid = this.getAttribute("myid");
                            // console.log(pid);
                            ajax({
                                url:'../../php/admin/allType.php',
                                method:'post',
                                dataType:'json',
                                data:{
                                    opt:'delProEle',
                                    pid
                                }
                            }).then(res=>{
                                if( res['status'] == 1 ){
                                    alert("删除成功！");
                                    getProList(page);
                                } else{
                                    alert("操作失败！");
                                }
                            });
                        }
                        ele.appendChild(trEle);
                    });
                }
                function getPagePro(page,perPage){
                    ajax({
                        url:'../../php/admin/allType.php',
                        dataType:'json',
                        method:'post',
                        data:{
                            opt:'getPagePro',
                            perPage
                        }
                    }).then(res=>{
                        renderPagePro(res['totalPage'],page);
                    });
                }
                function renderPagePro(pageNum,page){
                    let pagEle = document.querySelector(".aside > .products .pagination");
                    pagEle.innerHTML = '' ;
                    let str = '' ;
                    for(let i = 1 ; i <= pageNum ; i ++ ){
                        str += `<a href="javascript:;">${i}</a>`
                    }
                    pagEle.innerHTML = `<a href="javascript:;" class="prev">⌜</a>
                                    ${str}
                                    <a href="javascript:;" class="next">⌝</a>`;
                    let aEles = pagEle.querySelectorAll("a");
                    aEles.forEach(function(aEle,key){
                        aEle.onclick = function (){
                            if( aEle.className == "prev" ){
                                if( page > 1 ){
                                    page = page - 1 ;
                                    getProList(page);
                                }
                            } else 
                            if( aEle.className == "next" ){
                                if( page < pageNum ){
                                    page = page + 1 ;
                                    // console.log(page);
                                    getProList(page);
                                }
                            } else {
                                page = parseInt(aEle.innerHTML.trim()) ;
                                getProList(page);
                            }
                        }
                        
                    });
                  
                }
            }
            if ( opId == 4 ){
                let page = 1 ;
                let perPage = 6 ;
                let aEles = document.querySelectorAll(".aside-sec > ul li .transImg");
                let divEles = document.querySelectorAll(".aside-sec > .transImg"); 
                aEles.forEach(function(aEle,key){
                    aEle.onclick = function (){
                        divEles.forEach(item=>{
                            item.style.display="none";
                        });
                        if( key == 1 ){
                            ajax({
                                url:'../../php/admin/allType.php',
                                method:'post',
                                dataType:'json',
                                data:{
                                    opt:'getAllImg'
                                }
                            }).then(res=>{
                                let imgArr = res.map(item=>{return "../../"+item['transImg']});
                                let containEle = divEles[key].querySelector(".autoPlayImg");
                                console.log(containEle);
                                new MySwiper(containEle,imgArr);
                            });
                        }
                        divEles[key].style.display = "block" ;
                        aEles.forEach(item=>{item.classList.add("noActive");});
                        this.classList.remove("noActive");
                    }
                });
                addTransImg();
                function addTransImg(){
                    document.querySelector(".addTransImg").onclick = function (){
                        $("#addTransImg").fadeIn();
                        $(".cancel").click(()=>{$(".operate #addTransImg").css("display","none")});
                        document.querySelector("#submit5").onclick = function(){
                            let transImgFile = document.querySelector("#transImg").files[0];
                            // let isTrans = document.getElementsByName("isTrans")[0];
                            // console.dir(isTrans);
                            // let res = $(".isTrans[name=true]").checked().val();
                            let res = $(".isTrans:checked").val();
                            let form = new FormData();
                            form.append("isTrans",res);
                            form.append("transImg",transImgFile);
                            form.append("opt","addTransImg");
                            // console.log(form);
                            ajax({
                                url:'../../php/admin/allType.php',
                                method:'post',
                                contentType:false,
                                dataType:'json',
                                data:form
                            }).then(res=>{
                                // console.log(res);
                                if( res['status'] == 1 ){
                                    alert("添加成功！");
                                    $(".operate #addTransImg").css("display","none");
                                    getImgList(page);
                                } else {
                                    alert("添加失败！");
                                }
                            });
                        } 
                    }
                }
                getImgList(page);
                function getImgList(page){
                    ajax({
                        url:'../../php/admin/allType.php',
                        method:'post',
                        dataType:'JSON',
                        data:{
                            opt:'getImgList',
                            page,
                            perPage 
                        }
                    }).then(res=>{
                        let divEle = document.querySelectorAll(`.aside > section:nth-of-type(${opId}) > .transImg`)[0];
                        let ele = divEle.querySelector("table tbody"); 
                        renderImg(ele,res);
                        getImgPageNum(page,perPage);
                    });
                }
                function renderImg(ele,dataArr){
                    ele.innerHTML = '' ;
                    dataArr.forEach((item,key)=>{
                        let trEle = document.createElement("tr");
                        let str = '' ;
                        if( item['isTrue'] == 0 ){
                            str=' aside-sec-tab-span-active';
                        }
                        trEle.innerHTML = `
                            <td>${key+1}</td>
                            <td><img style="width:50px" src="../../${item['transImg']}" alt=""></td>
                            <td><span class="floatl" style="position: relative;top: 50%;transform: translateY(-50%);">是</span><div class="aside-sec-tab-div"  myid="${item['id']}"><a class="aside-sec-tab-span ${str}"></a></div><span class="floatr"  style="position: relative;top: -50%;transform: translateY(50%);">否</span></td>
                            <td><a class="delImg" myid="${item['id']}" href="javascript:;">删除</a></td>` ;
                        let isTrueEle = trEle.querySelector(".aside-sec-tab-div");
                        let delImgEle = trEle.querySelector(".delImg");
                        isTrueEle.onclick = function (){
                            let imgId = this.getAttribute("myid");
                            ajax({
                                url:'../../php/admin/allType.php',
                                method:'post',
                                dataType:'json',
                                data:{
                                    opt:'uptImg',
                                    operate:'isTrue',
                                    imgId
                                }
                            }).then(res=>{
                                getImgList(page);
                            });
                        }
                        delImgEle.onclick = function (){
                            let imgId = this.getAttribute("myid");
                            ajax({
                                url:'../../php/admin/allType.php',
                                method:'post',
                                dataType:'json',
                                data:{
                                    opt:'uptImg',
                                    operate:'isDelete',
                                    imgId
                                }
                            }).then(res=>{
                                if( res['status'] == 1 ){
                                    alert("删除成功！");
                                    getImgList(page);
                                }
                            });
                        }
                        ele.appendChild(trEle);
                    });
                }
                function getImgPageNum(page,perPage){
                    ajax({
                        url:'../../php/admin/allType.php',
                        method:'post',
                        dataType:'json',
                        data:{
                            perPage,
                            opt:'getImgPageNum'
                        }
                    }).then(res=>{
                        renderPageImg(res['totalPage'],page)
                    });
                }   
                function renderPageImg(pageNum,page){
                    let pagEle = document.querySelector(".aside-sec > .transImg > .pagination");
                    pagEle.innerHTML = '' ;
                    let str = '' ;
                    for(let i = 1 ; i <= pageNum ; i ++ ){
                        str += `<a href="javascript:;">${i}</a>`
                    }
                    pagEle.innerHTML = `<a href="javascript:;" class="prev">⌜</a>
                                    ${str}
                                    <a href="javascript:;" class="next">⌝</a>`;
                    let aEles = pagEle.querySelectorAll("a");
                    aEles.forEach(function(aEle,key){
                        aEle.onclick = function (){
                            if( aEle.className == "prev" ){
                                if( page > 1 ){
                                    page = page - 1 ;
                                    getImgList(page);
                                }
                            } else 
                            if( aEle.className == "next" ){
                                if( page < pageNum ){
                                    page = page + 1 ;
                                    // console.log(page);
                                    getImgList(page);
                                }
                            } else {
                                page = parseInt(aEle.innerHTML.trim()) ;
                                getImgList(page);
                            }
                        }
                        
                    });
                }
            }
            if ( opId == 5 ){
                let page = 1 ;
                let perPage = 10 ;
                let aEles = document.querySelectorAll(".aside-sec > ul li .type");
                let divEles = document.querySelectorAll(".aside-sec > .type"); 
                aEles.forEach(function(aEle,key){
                    aEle.onclick = function (){
                        divEles.forEach(item=>{item.style.display="none";});
                        divEles[key].style.display = "block" ;
                        aEles.forEach(item=>{item.classList.add("noActive");});
                        this.classList.remove("noActive");
                    }
                });
                getList(page);
                function addBigType(){
                    document.querySelector(".aside-body .addBigType").onclick = function(){
                        $("#addBigType").fadeIn();
                        $(".cancel").click(()=>{$(".operate #addBigType").css("display","none")});
                        document.getElementById("submit").onclick = function(){
                            if($("#TypeName").val()){
                                console.log($("#TypeName").val());
                                ajax({
                                    url:"../../php/admin/TypeName.php",
                                    method:"post",
                                    data:{
                                        TypeName:$("#TypeName").val(),
                                        opt:"addBigType"
                                    },
                                    dataType:"json"
                                }).then(res=>{
                                    switch(res['status']){
                                        case 0:
                                            alert(res['info']);
                                            getList(page);
                                            break;
                                        case 1:
                                            alert(res['info']);
                                            getList(page);
                                            break;
                                        case 2:
                                            alert(res['info']);
                                            // $("#TypeName").val("")
                                            $("#addBigType").css("display","none");
                                            getList(page);
                                            break;
                                        default:'';
                                        break;
                                    }
                                });
                            } else {
                                alert("类型名称不能为空!");
                            }
                        }
                    }
                }
                function getList(page){
                    ajax({
                        url:"../../php/admin/TypeName.php",
                        method:"post",
                        dataType:"json",
                        data:{
                            opt:'select1',
                            page,
                            perPage
                        }
                    }).then(res=>{
                        let uEle = document.querySelector(`.aside > section:nth-of-type(${opId}) .aside-body-table tbody`);
                        renderDomBType(uEle,res);
                        addBigType();
                        getPageNum(perPage,page);
                    });
                }
                function renderDomBType(ele,dataArr){
                    ele.innerHTML = '' ;
                    dataArr.forEach((item,key)=>{
                        let trEle = document.createElement("tr");
                        trEle.innerHTML = `<td>${key+1}</td>
                                    <td>${item['typeName']}</td>
                                    <td><a class="uptBtn" myid=${item['id']}>修改</a></td>
                                    <td><a class="delBtn" myid=${item['id']}>删除</a></td>` ;
                        // console.log(item['id']);
                        let uptBtnEle = trEle.querySelector(".uptBtn");
                        let delBtnEle = trEle.querySelector(".delBtn");
                        uptBtnEle.onclick = function(){
                            let typeId = this.getAttribute("myid");
                            $("#updBigType").fadeIn();
                            $(".cancel").click(()=>{$(".operate #updBigType").css("display","none")});
                            ajax({
                                url:'../../php/admin/allType.php',
                                method:'post',
                                dataType:'json',
                                data:{
                                    opt:'selUpt',
                                    typeId
                                }
                            }).then(res=>{
                                // console.log(res['typeName']);
                                document.querySelector("#TypeName1").value = res['typeName'] ;
                                let submitEle = document.querySelector("#submit1");
                                submitEle.onclick = function (){
                                    let typeName = $("#TypeName1").val();
                                    if(typeName){
                                        ajax({
                                            url:'../../php/admin/allType.php',
                                            method:'post',
                                            dataType:'json',
                                            data:{
                                                opt:'updBType',
                                                typeName,
                                                typeId
                                            }
                                        }).then(res=>{
                                            if( res['status'] == 1 ){
                                                alert("修改成功!");
                                                $(".operate #updBigType").css("display","none");
                                                getList(page);
                                            }
                                        });
                                    } else {
                                        alert("类型名称不能为空!");
                                    }
                                }
                            });
                        }
                        delBtnEle.onclick = function(){
                            let typeId = this.getAttribute("myid");
                            ajax({
                                url:'../../php/admin/allType.php',
                                method:'post',
                                dataType:'json',
                                data:{
                                    opt:'delBType',
                                    typeId
                                }
                            }).then(res=>{
                                if( res['status'] == 1 ){
                                    alert("删除成功！");
                                    getList(page);
                                }
                            });
                        }
                        ele.appendChild(trEle);
                    });
                }
                function getPageNum(perPage,page){
                    ajax({
                        url:'../../php/admin/allType.php',
                        method:'post',
                        dataType:'json',
                        data:{
                            perPage,
                            typeId:'faType',
                            opt:'BTypePage'
                        }
                    }).then(res=>{
                        pageRender (res['totalPage'],page)
                    });
                }
                function pageRender (pageNum,page){
                    let pagEle = document.querySelector(`.aside > section:nth-of-type(${opId}) .pagination`);
                    pagEle.innerHTML = '' ;
                    let str = '' ;
                    for(let i = 1 ; i <= pageNum ; i ++ ){
                        str += `<a href="javascript:;">${i}</a>`
                    }
                    pagEle.innerHTML = `<a href="javascript:;" class="prev">⌜</a>
                                    ${str}
                                    <a href="javascript:;" class="next">⌝</a>`;
                    let aEles = pagEle.querySelectorAll("a");
                    aEles.forEach(function(aEle,key){
                        aEle.onclick = function (){
                            if( aEle.className == "prev" ){
                                if( page > 1 ){
                                    page = page - 1 ;
                                     getList(page);
                                }
                            } else 
                            if( aEle.className == "next" ){
                                if( page < pageNum ){
                                    page = page + 1 ;
                                    // console.log(page);
                                     getList(page);
                                }
                            } else {
                                page = parseInt(aEle.innerHTML.trim()) ;
                                 getList(page);
                            }
                        }
                        
                    });
                }
                getSTypeList(page);
                function getSTypeList(page){
                    ajax({
                        url:'../../php/admin/allType.php',
                        method:'post',
                        dataType:'json',
                        data:{
                            opt:'getSTypeList',
                            page,
                            perPage
                        }
                    }).then(res=>{
                        // console.log(res);
                        let tbodyEle = document.querySelector(`.aside > section:nth-of-type(${opId}) > div:nth-of-type(2) tbody`);
                        renderDomSType(tbodyEle,res);
                        addSType();
                        getSPageNum(perPage,page);
                    });
                }
                function renderDomSType(ele,dataArr){
                    ele.innerHTML = '' ;
                    dataArr.forEach((item,key)=>{
                        let trEle = document.createElement("tr");
                        let str = '' ;
                        if( item['is_show'] == 2 ){
                            str=' aside-sec-tab-span-active';
                        }
                        trEle.innerHTML = `<td>${key+1}</td>
                                    <td>${item['temperName']}</td>
                                    <td><span class="floatl" style="position:relative;top: 50%;transform: translateY(-50%);">是</span><div class="aside-sec-tab-div"  myid="${item['id']}"><a class="aside-sec-tab-span ${str}"></a></div><span class="floatr"  style="position: relative;top: -50%;transform: translateY(50%);">否</span></td>
                                    <td><a myid="${item['id']}" class = "updStype" href="javascript:;">修改</a></td>
                                    <td><a myid="${item['id']}" class = "delStype" href="javascript:;">删除</a></td>`;
                        let updStypeEle = trEle.querySelector(".updStype");
                        let delStypeEle = trEle.querySelector(".delStype");
                        let curseEle = trEle.querySelector("td .aside-sec-tab-div");
                        curseEle.onclick = function (){
                            let temperId = this.getAttribute("myid") ; 
                            ajax({
                                url:'../../php/admin/allType.php',
                                method:'post',
                                dataType:'json',
                                data:{
                                    opt:'temperOpt',
                                    temperId
                                }
                            }).then(res=>{
                                getSTypeList(page);
                            });
                        }
                        updStypeEle.onclick = function (){
                            let typeId = this.getAttribute("myid");
                            $("#updStype").fadeIn();
                            $(".cancel").click(()=>{$(".operate #updStype").css("display","none")});
                            ajax({
                                url:'../../php/admin/allType.php',
                                dataType:'json',
                                method:'post',
                                data:{
                                    opt:'updSelStype',
                                    typeId
                                }
                            }).then(res=>{
                                document.querySelector("#TypeName3").value = res['temperName'] ; 
                            });
                            document.querySelector("#submit4").onclick = function (){
                                let temperName = document.querySelector("#TypeName3").value ; 
                                ajax({
                                    url:'../../php/admin/TypeName.php',
                                    method:'post',
                                    dataType:'json',
                                    data:{
                                        opt:'updStype',
                                        temperName,
                                        typeId
                                    }
                                }).then(res=>{
                                    if( res['status'] == 1 ){
                                        alert("修改成功！");
                                        $(".operate #updStype").css("display","none");
                                        getSTypeList(page);
                                    } else{
                                        alert("操作失败！");
                                    }
                                });
                            }
                        }
                        delStypeEle.onclick = function (){
                            let typeId = this.getAttribute("myid");
                            ajax({
                                url:'../../php/admin/allType.php',
                                method:'post',
                                dataType:'json',
                                data:{
                                    typeId,
                                    opt:'delStype'
                                }
                            }).then(res=>{
                                if( res['status'] == 1 ){
                                    alert("删除成功");
                                    getSTypeList(page);
                                } else {
                                    alert("操作失败");
                                }
                            });
                        }
                        ele.appendChild(trEle);
                    });
                }
                function addSType(){
                    document.querySelector(".aside-body .addSType").onclick = function(){
                        $("#addSType").fadeIn();
                        $(".cancel").click(()=>{$(".operate #addSType").css("display","none")});
                        document.querySelector("#submit3").onclick = function(){
                            let temperName = document.querySelector("#TypeName2").value;
                            ajax({
                                url:'../../php/admin/TypeName.php',
                                method:'post',
                                dataType:'json',
                                data:{
                                    opt:'addSType',
                                    temperName
                                }
                            }).then(res=>{
                                if( res['status'] == 1 ){
                                    alert("添加成功！");
                                    $(".operate #addSType").css("display","none");
                                    getSTypeList(page);
                                } else {
                                    alert("操作失败！");
                                }
                            });
                        }
                    }
                }
                
                function getSPageNum(perPage,page){
                    ajax({
                        url:'../../php/admin/allType.php',
                        method:'post',
                        dataType:'json',
                        data:{
                            perPage,
                            typeId:'subType',
                            opt:'BTypePage'
                        }
                    }).then(res=>{
                        SPageRender (res['totalPage'],page)
                    });
                }
                function SPageRender(pageNum,page){
                    let pagEle = document.querySelectorAll(`.aside > section:nth-of-type(${opId}) .pagination`)[1];
                    pagEle.innerHTML = '' ;
                    let str = '' ;
                    for(let i = 1 ; i <= pageNum ; i ++ ){
                        str += `<a href="javascript:;">${i}</a>`
                    }
                    pagEle.innerHTML = `<a href="javascript:;" class="prev">⌜</a>
                                    ${str}
                                    <a href="javascript:;" class="next">⌝</a>`;
                    let aEles = pagEle.querySelectorAll("a");
                    aEles.forEach(function(aEle,key){
                        aEle.onclick = function (){
                            if( aEle.className == "prev" ){
                                if( page > 1 ){
                                    page = page - 1 ;
                                    getSTypeList(page);
                                }
                            } else 
                            if( aEle.className == "next" ){
                                if( page < pageNum ){
                                    page = page + 1 ;
                                    // console.log(page);
                                    getSTypeList(page);
                                }
                            } else {
                                page = parseInt(aEle.innerHTML.trim()) ;
                                getSTypeList(page);
                            }
                        }
                        
                    });
                }
            }
        });
       
    </script>
</body>
</html>